﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/style.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../static/img/favicon.ico" rel="shortcut icon" />
    <link href="https://fonts.googleapis.com/css?family=Lato:700,900%7CDidact+Gothic" rel="stylesheet">
    <title>Opium</title>
</head>
<body>
    <!-- LOADER -->
    <div id="loader-wrapper">
        <div class="cssload-container">
            <div class="cssload-whirlpool"></div>
        </div>
    </div>
    <!-- LOADER -->

    <!-- HEADER -->
    <header class="header-style header-style2 header-style3 header-style4">
        <div class="hamburger-icon3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="header-content">
            <div class="row">
                <div class="col-xs-6 col-sm-2">
                    <a class="logo" href="index.html">
                        <img src="../static/img/logo.png" alt="#" />
                    </a>
                </div>
                <div class="col-xs-6 col-sm-10">
                    <div class="hamburger-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="hamburger-icon2">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <nav class="normal-s">
                        <ul>
                            <li class="dropdown-plus">
                                <a href="index.html">HOME</a>
                                <span></span>
                                <ul>
                                    <li><a href="index.html">Home #1</a></li>
                                    <li><a href="index2.html">Home #2</a></li>
                                    <li><a href="index3.html">Home #3</a></li>
                                    <li><a href="index4.html">Home #4</a></li>
                                    <li><a href="index5.html">Home #5</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="about.html">ABOUT</a>
                            </li>
                            <li>
                                <a href="detail.html">PORTFOLIO</a>
                            </li>
                            <li class="dropdown-plus active">
                                <a href="blog.html">BLOG</a>
                                <span></span>
                                <ul>
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blogdetail.html">Blog detail</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="contact.html">CONTACT</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="section">
                    <p>A small design & technology freelancer based out of Atlanta, GA. Catch up on my latest projects and get in touch.</p>
                </div>
                <div class="category">
                    <span class="small-1">CATEGORY</span>
                    <ul>
                        <li class="active">All</li>
                        <li>Development</li>
                        <li>Illustration</li>
                        <li>Product</li>
                        <li>Typography</li>
                    </ul>
                </div>
                <div class="sort-by">
                    <span class="small-1">SORT BY</span>
                    <ul>
                        <li>Random</li>
                        <li class="active">Popular</li>
                        <li>Rate</li>
                    </ul>
                </div>
                <div class="normal-3 section">
                    <ul>
                        <li>
                            <a href="tel:+138(095)6526538">+138 (095) 6526 538</a>
                        </li>
                        <li>
                            <a href="mailto:info@opium.com">info@opium.com</a>
                        </li>
                    </ul>
                    <div class="empty-space h10-xs fl"></div>
                    <div class="follow">
                        <a class="social" href="https://www.facebook.com/" target="_blank">
                            <i class="fa fa-facebook" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.instagram.com/" target="_blank">
                            <i class="fa fa-instagram" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.pinterest.com/" target="_blank">
                            <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.twitter.com/" target="_blank">
                            <i class="fa fa-twitter" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mob-icon"></div> 
        </div>                                                          
    </header>
    <!-- HEADER -->
    
    <!-- OVERLAY-MENU -->
    <div class="overlay-wrapper height-min">
        <div class="overlay-animation"></div>
        <div class="flex">
            <div class="flex-in">
                <div class="overlay-menu">
                    <div class="container">
                        <div class="row">
                            <div class="btn-close"><span></span><span></span></div>
                            <div class="col-lg-2 col-lg-offset-5">
                                <ul>
                                    <li class="dropdown-plus">
                                        <a href="index.html">HOME</a>
                                        <span></span>
                                        <ul>
                                            <li><a href="index.html">Home #1</a></li>
                                            <li><a href="index2.html">Home #2</a></li>
                                            <li><a href="index3.html">Home #3</a></li>
                                            <li><a href="index4.html">Home #4</a></li>
                                            <li><a href="index5.html">Home #5</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="about.html">ABOUT</a>
                                    </li>
                                    <li>
                                        <a href="detail.html">PORTFOLIO</a>
                                    </li>
                                    <li class="dropdown-plus">
                                        <a href="blog.html">BLOG</a>
                                        <span></span>
                                        <ul>
                                            <li><a href="blog.html">Blog</a></li>
                                            <li><a href="blogdetail.html">Blog detail</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="contact.html">CONTACT</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end OVERLAY-MENU -->

    <!-- content -->
    <div id="content-wrapper">
        
        <div class="empty-space h45-xs h65-sm"></div>
        <div class="container-fluid-style2">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <article>
                        <h1 class="h1">OUR BLOG</h1>
                        <div class="empty-space h15-xs"></div>
                        <p class="normal-l dark-grey">Praesent euismod sollicitudin tristique. Donec imperdiet convallis ante, id porttitor leo consequat non. Suspendisse rutrum sed nisl in luctus. Proin accumsan eget lorem id varius</p>
                    </article>
                </div>
            </div>
            <div class="empty-space h15-xs h45-sm"></div>
            <div class="row">
                <div class="col-md-12">
                    <div class="content-menu">
                        <div class="button-drop">
                           <a href="#">
                            <span>ALL</span>
                            <i class="fa fa-angle-down" aria-hidden="true"></i>
                            <i class="fa fa-angle-up" aria-hidden="true"></i>
                        </a> 
                        </div>
                        <ul>
                            <li><a class="active" data-name="ALL" href="#"><span>ALL</span></a></li>
                            <li><a data-name="DESIGN" href="#"><span>DESIGN</span></a></li>
                            <li><a data-name="BRANDING" href="#"><span>BRANDING</span></a></li>
                            <li><a data-name="ADVERTISING" href="#"><span>ADVERTISING</span></a></li>
                            <li><a data-name="LOGO" href="#"><span>LOGO</span></a></li>
                            <li><a data-name="DEVELOPMENT" href="#"><span>DEVELOPMENT</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="empty-space h40-xs h60-md"></div>

            <!--left-right -->
            <div class="left-right">
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-6">
                        <div class="clip left-side">
                            <a href="#" class="bg" style="background-image:url(../static/img/blog-img-1.jpg);"></a>
                        </div>
                        <div class="row">
                            <div class="empty-space h30-xs h30-sm h60-md"></div>
                            <div class="col-md-12 text-center">
                                <a class="btn-style3" href="#">DISIGN</a>
                            </div>
                            <div class="empty-space h15-xs fl"></div>
                            <div class="col-md-12 text-center">
                                <div class="autor small-1">
                                    <span>GORAN RAMLJAK</span>
                                    <span>JUNE 19/2016</span>
                                    5 <i class="fa fa-comments-o"></i> 32 <i class="fa fa-heart-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="empty-space h15-xs"></div>
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2 text-center">
                                <div class="section">
                                    <div class="h5">
                                        <span class="mouseover-2">
                                            <a href="#">PELLENTESQUE ALIQUAM A ERAT UT ELEMENTUM</a>
                                        </span>
                                    </div>
                                    <p>Ut hendrerit, neque et laoreet sollicitudin, massa odio rhoncus orci, semper convallis leo tellus quis sem. Nulla nec lectus imperdiet, fringilla odio eu, dapibus enim. Aliquam vulputate dolor</p>
                                </div>
                            </div>
                            <div class="empty-space h60-xs fl"></div>
                        </div>
                    </div>
                </div>
                <div class="empty-space h30-xs fl"></div>
                <div class="row">
                    <div class="col-md-6 pull-right"></div>
                    <div class="col-md-6">
                        <div class="clip right-side">
                            <a href="#" class="bg" style="background-image:url(../static/img/blog-img-2.jpg);"></a>
                        </div>
                        <div class="row">
                            <div class="empty-space h30-xs h30-sm h60-md fl"></div>
                            <div class="col-md-12 text-center">
                                <a class="btn-style3" href="#">DEVELOPMENT</a>
                            </div>
                            <div class="empty-space h15-xs fl"></div>
                            <div class="col-md-12 text-center">
                                <div class="autor small-1">
                                    <span>GORAN RAMLJAK</span>
                                    <span>JUNE 19/2016</span>
                                    5 <i class="fa fa-comments-o"></i> 32 <i class="fa fa-heart-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="empty-space h15-xs"></div>
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2 text-center">
                                <div class="section">
                                    <div class="h5">
                                        <span class="mouseover-2">
                                            <a href="#">PELLENTESQUE ALIQUAM A ERAT UT ELEMENTUM</a>
                                        </span>
                                    </div>
                                    <p>Ut hendrerit, neque et laoreet sollicitudin, massa odio rhoncus orci, semper convallis leo tellus quis sem. Nulla nec lectus imperdiet, fringilla odio eu, dapibus enim. Aliquam vulputate dolor</p>
                                </div>
                            </div>
                            <div class="empty-space h60-xs fl"></div>
                        </div>
                    </div>
                </div>
                <div class="empty-space h30-xs fl"></div>
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-6">
                        <div class="clip left-side">
                            <a href="#" class="bg" style="background-image:url(../static/img/blog-img-3.jpg);"></a>
                        </div>
                        <div class="row">
                            <div class="empty-space h30-xs h30-sm h60-md fl"></div>
                            <div class="col-md-12 text-center">
                                <a class="btn-style3" href="#">DEVELOPMENT</a>
                            </div>
                            <div class="empty-space h15-xs fl"></div>
                            <div class="col-md-12 text-center">
                                <div class="autor small-1">
                                    <span>GORAN RAMLJAK</span>
                                    <span>JUNE 19/2016</span>
                                    5 <i class="fa fa-comments-o"></i> 32 <i class="fa fa-heart-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="empty-space h15-xs"></div>
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2 text-center">
                                <div class="section">
                                    <div class="h5">
                                        <span class="mouseover-2">
                                            <a href="#">PELLENTESQUE ALIQUAM A ERAT UT ELEMENTUM</a>
                                        </span>
                                    </div>
                                    <p>Ut hendrerit, neque et laoreet sollicitudin, massa odio rhoncus orci, semper convallis leo tellus quis sem. Nulla nec lectus imperdiet, fringilla odio eu, dapibus enim. Aliquam vulputate dolor</p>
                                </div>
                            </div>
                            <div class="empty-space h60-xs fl"></div>
                        </div>
                    </div>
                </div>
                <div class="empty-space h30-xs fl"></div> 
                <div class="row">
                    <div class="col-md-6 pull-right"></div>
                    <div class="col-md-6">
                        <div class="clip right-side">
                            <a href="#" class="bg" style="background-image:url(../static/img/blog-img-4.jpg);"></a>
                        </div>
                        <div class="row">
                            <div class="empty-space h30-xs h30-sm h60-md fl"></div>
                            <div class="col-md-12 text-center">
                                <a class="btn-style3" href="#">ADVARTISING</a>
                            </div>
                            <div class="empty-space h15-xs fl"></div>
                            <div class="col-md-12 text-center">
                                <div class="autor small-1">
                                    <span>GORAN RAMLJAK</span>
                                    <span>JUNE 19/2016</span>
                                    5 <i class="fa fa-comments-o"></i> 32 <i class="fa fa-heart-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="empty-space h15-xs"></div>
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2 text-center">
                                <div class="section">
                                    <div class="h5">
                                        <span class="mouseover-2">
                                            <a href="#">PELLENTESQUE ALIQUAM A ERAT UT ELEMENTUM</a>
                                        </span>
                                    </div>
                                    <p>Ut hendrerit, neque et laoreet sollicitudin, massa odio rhoncus orci, semper convallis leo tellus quis sem. Nulla nec lectus imperdiet, fringilla odio eu, dapibus enim. Aliquam vulputate dolor</p>
                                </div>
                            </div>
                            <div class="empty-space h60-xs fl"></div>
                        </div>
                    </div>
                </div>
                <div class="empty-space h30-xs fl"></div>
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-6">
                        <div class="clip left-side">
                            <a href="#" class="bg" style="background-image:url(../static/img/blog-img-5.jpg);"></a>
                        </div>
                        <div class="row">
                            <div class="empty-space h30-xs h30-sm h60-md fl"></div>
                            <div class="col-md-12 text-center">
                                <a class="btn-style3" href="#">BRENDING</a>
                            </div>
                            <div class="empty-space h15-xs fl"></div>
                            <div class="col-md-12 text-center">
                                <div class="autor small-1">
                                    <span>GORAN RAMLJAK</span>
                                    <span>JUNE 19/2016</span>
                                    5 <i class="fa fa-comments-o"></i> 32 <i class="fa fa-heart-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="empty-space h15-xs"></div>
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2 text-center">
                                <div class="section">
                                    <div class="h5">
                                        <span class="mouseover-2">
                                            <a href="#">PELLENTESQUE ALIQUAM A ERAT UT ELEMENTUM</a>
                                        </span>
                                    </div>
                                    <p>Ut hendrerit, neque et laoreet sollicitudin, massa odio rhoncus orci, semper convallis leo tellus quis sem. Nulla nec lectus imperdiet, fringilla odio eu, dapibus enim. Aliquam vulputate dolor</p>
                                </div>
                            </div>
                            <div class="empty-space h30-xs h60-sm fl"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end left-right -->
            <div class="empty-space h15-xs h15-sm h90-md"></div>
            <div class="page-pagination">
                <ul>
                    <li><a href="#">PREVIOUS</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">NEXT</a></li>
                </ul>
            </div>
        </div>
        <!-- end container-fluid-style2 -->
        <div class="empty-space h0-xs h30-sm fl"></div>

        <!-- footer -->
        <footer class="footer-style">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="copyright normal-s">
                            Copyright &copy; 2017.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer -->
                
    </div>
    <!-- content -->

    <script src="../static/js/jquery-2.2.4.min.js"></script>
    <script src="../static/js/global.js"></script>
</body>
</html>
